<template>
  <div class="doctor-item">
      <div class="item-left">
        <div class="mt10">
          <img src="../assets/images/doctor_default.png" alt="">
        </div>
        <div class="item-left-right">
          <div class="title">周忠英</div>
          <div class="subtext">主任中医师</div>
          <div class="detail f1 t3 mt10">专治疑难杂症</div>
        </div>
      </div>
      <div class="item-right">
        <!-- ampm -->
        <div class="ampm">
          <div class="">&nbsp;</div>
          <div class="">上午</div>
          <div class="">下午</div>
        </div>
        <!-- days -->
        <div class="days">
          <div class="day day-head" v-for="i in 7">
            09-13
            <div>周三</div>
          </div>

          <div class="day" :class="{active: i===10}" v-for="i in 14" @click="selectTime">
            预约
          </div>
        </div>
        <!--  -->
      </div>

      <!-- modal1 -->
      <Modal
        v-model="modal1"
        title="请选择就诊时段"
        :footer-hide="true"
        @on-ok="okHandle">

        <p class="tips-text">
          科室：心内科 &nbsp;&nbsp;&nbsp;
          医生：张一山 &nbsp;&nbsp;&nbsp;
          日期：2018-10-15 
        </p>
       
        <ul class="mt10 time-list">
          <li v-for="i in 8">
            <a href="javascript:;"  @click="timeClickHandle">07:30-08:00</a>
          </li>
        </ul>
    </Modal>

  </div>
</template>

<script>
export default {
  data () {
    return {
      modal1: false
    }
  },
  methods: {
    selectTime() {
      this.modal1 = true
    },
    okHandle() {

    },
    timeClickHandle () {
      this.$router.push('confirm')
    }
  }
}
</script>

<style lang="less" scoped>
@border-color:#f2f2f2;
@primary-color:#3556C1;

.doctor-item, .item-left, .item-right, .days{
  display: flex;
}
.doctor-item,{
  border: 1px solid @border-color;
  margin-bottom: 10px;
}
.item-left-right {
  padding: 10px;
  .title {font-size: 1.2em;}
}
.item-right {
  flex: 1;
}
.ampm {
  text-align: center;
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  >div {
    line-height: 50px;
    border-left:1px solid @border-color;
    border-top:1px solid @border-color;
  }
}
.days {
  flex: 1;
  flex-wrap: wrap;
  text-align: center;
  .day{
    width: 100% / 7;
    height: 50px;
    line-height: 50px;
    align-items: center;
    justify-content: center;
    border-left:1px solid @border-color;
    border-top:1px solid @border-color;
    &.day-head{
      background: #f1f4fb;
      line-height: 25px;
    }
    &.active {
      background: #88b8f9;
      color: #fff;
    }
  }
}
.time-list {
  overflow: hidden;
  li {
    width: 50%;
    float: left;
    text-align: center;
    padding: 10px;
    a{ 
      display: block;
      border-radius: 4px;
      border:1px solid @primary-color;
      padding: 10px;
      &.active ,&:hover{
        background: @primary-color;
        color: #fff;
      }
    }
  }
}

</style>
